<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>v-on:keydown</title>
        <script src="js/vuejs-2.5.16.js"></script>
    </head>
    <body>
        <div id="app">
            Vue:<input type="text" v-on:keydown="fun($event)">
            <hr/>
            传统js：<input type="text" onkeydown="showKeyCode()" />
        </div>
    </body>
    <script>
        //view model
        new Vue({
            el:"#app",
            methods:{
                /* $event 它是vue中的事件对象，和我们传统js的event对象是一样的 */
                fun:function(event){
                    var keyCode = event.keyCode;
                    if (keyCode < 48 || keyCode > 57){
                        //不让键盘的按键起作用
                        event.preventDefault()
                    }
                }
            }

        });

        //传统js的键盘按下事件
        function showKeyCode(){
            //event对象和我们的document对象以及Window对象是一样的，可以不用定义直接使用
            var keyCode = event.keyCode;
            if (keyCode < 48 || keyCode > 57){
                //不让键盘的按键起作用
                event.preventDefault()
            }
            //alert(keyCode);
            // if (event.keyCode == 13){
            //     alert("你按的是回车");
            // }

        }
    </script>
</html>